Grid Control in WPF

Grid control arranges content in rows and columns as specified by the developer. In XAML <Grid /> elements used to create a Grid control in WPF. In Grid control we can span multiple rows as well as multiple columns. In this demonstration I will show you how to use Grid control in WPF. A grid consists of rows and columns. A grid has RowDefination and ColumnDefination that specify the height and width of the control.

The following code snippets represent Grid control in WPF

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button x:Name="btn1" Content="First Button" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
        <Button x:Name="btn2" Content="Second Button" Grid.Row="0" Grid.Column="2" />
        <Button x:Name="btn3" Content="Thired Button" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />
        <Button x:Name="btn4" Content="Fourth Button" Grid.Row="1" Grid.Column="1" />
        <Button x:Name="btn5" Content="Fifth Button" Grid.Row="1" Grid.Column="2" />
        <Button x:Name="btn6" Content="Six Button" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" />
</Grid>

In <Grid /> element the <Grid.RowDefinitions /> element is used to define row for your Grid element. <RowDifination /> element is used to define row for your control. <Grid.ColumnDfination> elemnt is used to define column for your Grid. <ColumnDefination /> element is used to create column for your control. Grid.Row property is used to access row of control and Grid.Column property is used to access column of row. Grid.ColumnSpan property is used to merge columns in specific row while Grid.RowSpan property is used to merge Row of your control.